<template>
    <div class="video-player">
        <div class="btn-div left">
            <button
                class="btn left"
                @click="prevVideo"
                :disabled="currentIdx.value === 0"
            ></button>
        </div>
        <template v-if="videos.length && videos[currentIdx]">
            <iframe
                class="main-video iframe"
                v-if="videos[currentIdx].type === 'iframe'"
                frameborder="0"
                :src="videos[currentIdx].video"
                referrerpolicy="unsafe-url"
                allowfullscreen
                ref="videoRef"
            ></iframe>
            <video
                class="main-video video"
                v-else
                :src="videos[currentIdx].video"
                controls
                autoplay
                loop
                muted
                ref="videoRef"
            >
                <source src="" type="video/mp4" />
                您的浏览器不支持视频播放。
            </video>
        </template>
        <div class="btn-div right">
            <button
                class="btn right"
                @click="nextVideo"
                :disabled="currentIdx.value === videos.length - 1"
            ></button>
        </div>
        <img class="yysls-logo" :src="PageAssets.videoYYSLSlogo" alt="" />
        <img
            class="bottom-tip"
            src="https://saas.chatbot.cn/download/minio/standard/2025-10-24/eed1b73cc79344cf8b58b72e3c54c419.png"
            alt=""
        />
        <img class="fenghua-logo" :src="PageAssets.videoOrganizeLogo" alt="" />
        <img class="text-img" :src="PageAssets.videoTxt" alt="" />
        <navigationSmall :top="'0rem'" :right="'0rem'" :bgHeight="'41rem'" />
    </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from "vue";
import navigationSmall from "@/components/navigationSmall.vue";
import { getPageAssets, getVideoData } from "./api";
import { useRouter } from "vue-router";
const router = useRouter();
function handleWheel(e) {
    if (e.deltaY < 0) {
        router.push("/home");
    }
    if (e.deltaY > 0) {
        router.push("/photo-album");
    }
}

const videos = ref([]);
const PageAssets = ref("");
const currentIdx = ref(0);
const videoRef = ref(null);
function prevVideo() {
    if (currentIdx.value > 0) {
        currentIdx.value--;
        playVideo();
    }
}
function nextVideo() {
    if (currentIdx.value < videos.value.length - 1) {
        currentIdx.value++;
        playVideo();
    }
}
function playVideo() {
    if (videoRef.value && videos.value[currentIdx.value].type === "video") {
        videoRef.value.currentTime = 0;
        videoRef.value.play();
    }
}
onMounted(async () => {
    PageAssets.value = await getPageAssets();
    videos.value = await getVideoData();
    window.addEventListener("wheel", handleWheel);
});
onUnmounted(() => {
    window.removeEventListener("wheel", handleWheel);
});
</script>

<style lang="scss" scoped>
.video-player {
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #2d3044;
    .btn-div {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 7rem;
        height: 100vh;
        background-color: rgba($color: #000000, $alpha: 0.5);
        border: none;
        cursor: pointer;
        pointer-events: none;
        z-index: 3;
        .btn {
            width: 5rem;
            height: 5rem;
            border: none;
            pointer-events: auto;
            transition: transform 0.5s;
            animation: shakeX 5s infinite ease-in-out;
            &:hover {
                transform: scale(1.2);
                animation: none;
            }
        }
        .left {
            background: url("https://www.yn12377.cn/jubao/upload/smjb/2025/10/24/5a33458013ee4187a8df5724af75676c.png")
                no-repeat center center;
        }
        .right {
            background: url("https://saas.chatbot.cn/download/minio/standard/2025-10-24/f948e8cfc71347e5829d5d79a447d662.png")
                no-repeat center center;
        }
    }
    .btn-div.left {
        position: absolute;
        top: 0;
        left: 0;
    }
    .btn-div.right {
        position: absolute;
        top: 0;
        right: 0;
    }
    .main-video.iframe {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);
        width: 147.6rem;
        height: 100vh;
        object-fit: contain;
    }
    .main-video {
        position: absolute;
        top: 0;
        left: 0;
        transform: translate(0, 0);
        width: 100vw;
        height: 100vh;
        object-fit: fill;
    }
    .yysls-logo {
        position: absolute;
        right: 2rem;
        bottom: 22rem;
        height: 15rem;
        z-index: 5;
    }
    .bottom-tip {
        position: absolute;
        right: 2rem;
        bottom: 10rem;
        height: 10rem;
        animation: floatY 5s infinite ease-in-out;
        z-index: 5;
    }
    .fenghua-logo {
        position: absolute;
        top: 2rem;
        left: 0rem;
        height: 13rem;
        z-index: 5;
    }
    .text-img {
        position: absolute;
        bottom: 15rem;
        left: 2rem;
        height: 20rem;
        animation: floatY 5s infinite ease-in-out;
        z-index: 5;
    }
}
@keyframes shakeX {
    0% {
        transform: translateX(0);
    }
    20% {
        transform: translateX(-6px);
    }
    40% {
        transform: translateX(6px);
    }
    60% {
        transform: translateX(-6px);
    }
    80% {
        transform: translateX(6px);
    }
    100% {
        transform: translateX(0);
    }
}
@keyframes floatY {
    0% {
        transform: translateY(0);
    }
    20% {
        transform: translateY(-8px);
    }
    40% {
        transform: translateY(8px);
    }
    60% {
        transform: translateY(-8px);
    }
    80% {
        transform: translateY(8px);
    }
    100% {
        transform: translateY(0);
    }
}
</style>
